<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="/natal/js/rem.js"></script>
    <link rel="stylesheet" href="/static/synastry_report/css/style.css?v=34">
    <link rel="stylesheet" href="/static/synastry_report/css/index.css?v=3">
    <title>合盘恋爱报告</title>
</head>
<body>
<div class="synastry-report">
    <div class="nav" style="visibility:{$is_show_nav?'visible':'hidden'}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="to-back" onclick="commonJsToNative('local', 'finish');">
                <div class="img"></div>
            </div>
            <div class="title-name">{$rname}</div>
        </div>
    </div>
    <div class="header-box " style="border-top: {$height*0.005}rem solid rgb(255,197,212);background-image: url({$res.top_pic}); background-size: cover;"></div>
    <div class="middle-box">
        <div class="top-box" style="margin-top:0.5rem">
            <div class="bg-box content-item">
                <div class="text-box">
                    <p class="pre-text">{$res.top_title}</p>
                </div>
            </div>
        </div>
        <div class="unlock-recode-box {$is_expand?'expand':''} {$unlock_recode_info.recode_is_change?'change':''}" data-expand="{$unlock_recode_info.recode_is_change?1:0}">
            <div class="unlock-recode-title">
                <span class="title">购买时的档案信息</span>
                <div class="is-expand-box"><span></span></div>
            </div>
            {foreach name="unlock_recode_info.info" item="recodeInfo"}
            <div class="recode-info-box">
                <div class="recode-name-box"><img src="{$recodeInfo.avatar}" alt=""><span class="recode-name">{$recodeInfo.name}</span></div>
                {foreach name="$recodeInfo.info_list" item="listItem"}
                <div class="recode-info-item">
                    <span class="info-title">{$listItem.title}</span>
                    <span class="info-value">{$listItem.content}</span>
                </div>
                {/foreach}
            </div>
            {/foreach}
            <div class="recode-change-box">
                <img src="/natal/images/gaojing.png" alt="" class="tip-icon">
                <img src="/natal/images/close-icon.png" alt="" class="close-icon">
                <div class="change-title">检测到当前档案出生时间已发生修改</div>
                <div class="change-desc">已购买的运势内容不会随着档案的修改重新计算</div>
                <div class="change-btn">再次开通</div>
            </div>
        </div>
        <!--档案关系-->
        <div class="recode_info">
            <div class="avatar1" style="background-image: url('{$res.recode_info[0]["avatar"]}')">
        </div>
        <div class="name1" style="color: #77666C"><span>{$res.recode_info[0]['name']}</span></div>
        <div class="info1" style="color: #77666C"><span>{$res.recode_info[0]['astro_info']}</span></div>
        <div class="cav"></div>
        <div class="cav_des">{$res.relation}</div>
        <div class="avatar2" style="background-image: url('{$res.recode_info[1]["avatar"]}')">
    </div>
    <div class="name2" style="color: #77666C"><span>{$res.recode_info[1]['name']}</span></div>
    <div class="info2" style="color: #77666C"><span>{$res.recode_info[1]['astro_info']}</span></div>
</div>
{if count($res.year_list)>1}
<div class="year-list">
    <div class="show-area">
        <div class="list-area" style="width: {$count = count($res.year_list) * 2.17;}rem;">
            {foreach name="$res.year_list" item="v" key="k"}
            <a class="year-link{if $v.selected} cur{/if} year-click" data-year="{$k}" {if !$v.selected}href="{$v.link}" target="_blank"{/if}>
            <span class="year-title">{$v.title}</span>
            <span class="year-des">{$v.time}</span>
            </a>
            {/foreach}
        </div>
    </div>
</div>
{/if}

<!--升温的月份曲线图-->
{if condition="$res['relation_up']"}
<div class="content-box scrollTitle" data-index="m-1">
    <div class="content-item">
        <div class="title_img" style="background-image: url('{$res.relation_up["title_img"]}');">
    </div>
    <p>{$res.relation_up['intro']}</p>
    {if $res.level1_sum > 0}
    <p class="curv-title">月份曲线图</p>
    <div class="curv-box">
        <div class="curv-area">
            <div class="curv-area-content">
                <canvas id="curv1">canvas</canvas>
            </div>
        </div>
    </div>
    <div class="curv-tips">
        <span class="good"><i></i>升温运势高点</span>
        <span class="icon_des">未来12个月发展</span>
    </div>
    {/if}
</div>
{/if}
<!--升温的月份内容-->
{if condition="$res['relation_up']"}
<div class="content-box">
    <div class="content-item">
        {if condition="$res.relation_up['month_intro']"}
        <p class="content">{$res.relation_up['month_intro']}</p>
        {/if}
        {foreach name="$res['relation_up']['month_info']" item="vo" key="k"}
        {if condition="$vo['date']"}
        <img style="width: 0.3rem;height: 0.3rem;position: relative;top: 0.03rem;" src="https://oss.goddessxzns.com/web/static/synastry_report/star-1.png" alt="">
        <span class="title"><b>{$vo['date']}</b></span>
        {/if}
        <p class="content">{$vo['code']}</p>
        {/foreach}
        {if condition="$res.relation_up['summary'] && $res.level1_sum > 0"}
        <img style="width: 0.36rem;height: 0.36rem;position: relative;top: 0.03rem;" src="https://oss.goddessxzns.com/web/static/synastry_report/star-end-1.png" alt="">
        <span class="title"><b>Tips</b></span>
        <p style="padding-top: 0.2rem;">{$res.relation_up['summary']}</p>
        {/if}
    </div>
</div>
{/if}
<!--受阻的月份曲线图-->
{if condition="$res['relation_down']"}
<div class="content-box scrollTitle" data-index="m-2">
    <div class="content-item">
        <div class="title_img" style="background-image: url('{$res.relation_down["title_img"]}');">
    </div>
    <p>{$res.relation_down['intro']}</p>
    {if $res.level2_sum > 0}
    <div class="curv-box">
        <p class="curv-title">月份曲线图</p>
        <div class="curv-area">
            <div class="curv-area-content">
                <canvas id="curv2">canvas</canvas>
            </div>
        </div>
    </div>
    <div class="curv-tips">
        <span class="bad"><i></i>受阻运势高点</span>
        <span class="icon_des">未来12个月发展</span>
    </div>
    {/if}
</div>
{/if}
<!--受阻的月份内容-->
{if condition="$res['relation_down']"}
<div class="content-box">
    <div class="content-item">
        {if condition="$res.relation_down['month_intro']"}
        <p class="content">{$res.relation_down['month_intro']}</p>
        {/if}
        {foreach name="$res['relation_down']['month_info']" item="vo" key="k"}
        {if condition="$vo['date']"}
        <img style="width: 0.3rem;height: 0.3rem;position: relative;top: 0.03rem;" src="https://oss.goddessxzns.com/web/static/synastry_report/star-2.png" alt="">
        <span class="title"><b>{$vo['date']}</b></span>
        {/if}
        <p class="content">{$vo['code']}</p>
        {/foreach}
        {if condition="$res.relation_down['summary'] && $res.level2_sum > 0"}
        <img style="width: 0.36rem;height: 0.36rem;position: relative;top: 0.03rem;" src="https://oss.goddessxzns.com/web/static/synastry_report/star-end-2.png" alt="">
        <span class="title"><b>Tips</b></span>
        <p style="padding-top: 0.2rem;">{$res.relation_down['summary']}</p>
        {/if}
    </div>
</div>
{/if}
{foreach name="$res['text']" item="vo" key ="k"}
<!--阻碍-->
<div class="content-box scrollTitle" data-index="d-{$k + 1}" style="padding-top: 1.32rem;">
    <div class="item-box">
        <div class="title-box">
            <img src="{$vo['img']}" alt="">
        </div>
        <div class="t1-box">
            <p class="t1 pre-text">{$vo['text']}</p>
        </div>
    </div>
</div>
{/foreach}
<div class="bottom-box">
    <div class="bg-box">
        <div class="text-box">
            <p class="pre-text" style="margin-top: 0.44rem;">{$res.goddess_Message}</p>
        </div>
    </div>
    <img class="bt-star" src="/static/synastry_report/images/star_name.png" alt="">
    <img class="bt-img" src="https://oss.goddessxzns.com/web/static/synastry_report/bottom.png?v=1" alt="">
</div>
<!--抽屉-->
<div class="menu-box">
    <div class="menu-button">
        <img src="https://oss.goddessxzns.com/web/static/synastry_report/menu.png?v=1" alt="目录"/>
    </div>
    <div class="menu-shadow" id="menu-shadow"></div>
    <div class="menu-list">
        <div class="menu-title">
            <span class="head">目录</span>
            <i class="collapse"></i>
        </div>
        {foreach name="$res['menu']" item="vo" key="k"}
        <dl>
            <dt data-index="{$k}">{$vo}</dt>
        </dl>
        {/foreach}
    </div>
</div>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    window.navHeight = {$height};
    window.appType = '{$appType}';
    window.version = '{$version}';
    window.levels1 = {$res.level1};
    window.levels2 = {$res.level2};
    window.isShow = 1; // 1抽屉隐藏 2抽屉显示
    window.level1_sum = {$res.level1_sum};
    window.level2_sum = {$res.level2_sum};
</script>
<script type="text/javascript" src="/natal/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript" src="/natal/js/common.js?v=36"></script>
<script type="text/javascript" src="/synastry_report/js/canvas.js?v=34"></script>
<script type="text/javascript">
    $(function () {
        var headerBoxScale = 750/434,headerBoxNode = $('.header-box');
        // 动态设置顶部头图的高度
        headerBoxNode.css({height: headerBoxNode.width() / headerBoxScale})

        window.drawCanvas.colors = ['#FF8FAC','#FF8FAC'];
        if (window.level1_sum) {
            // window.levels1 = [0,0,0,0,0,0,0,0,5,0,0,3];// 测试曲线滑动数据
            window.drawCanvas.initload('curv1', window.levels1,'{$start_month}', 5, 0, 0, 1);
            var min1 = -1, whereIs3_1 = $.inArray(3, window.levels1), whereIs5_1 = $.inArray(5, window.levels1);
            // 获取曲线中，第一个点的位置
            if(min1 === -1 || (whereIs3_1 < min1 && whereIs3_1 !== -1))
            {
                min1 = whereIs3_1;
            }
            if(min1 === -1 || (whereIs5_1 < min1 && whereIs5_1 !== -1))
            {
                min1 = whereIs5_1;
            }
            if(min1 > 7)
            {
                var cruvTitle1Pos = $('.curv-tips').eq(0).offset().top, isMoved1 = false;
                // 检测是否滑动到月份曲线图
                $(window).scroll(function (e) {
                    if(isMoved1)
                    {
                        // console.log('已经触发过滑动了～')
                    } else {
                        var winPos = $(window).scrollTop();
                        if(winPos + window.screen.availHeight >= cruvTitle1Pos)
                        {
                            // console.log('曲线已经能完整看到了～')
                            $('.curv-area-content').eq(0).animate({scrollLeft: 800}, {
                                duration: 1500,
                                queue: false,// 必须设置为false，否则一直调用回调函数
                                complete: function(){
                                    // console.log('曲线滑动指定位置完成')
                                    isMoved1 = true;
                                }
                            });
                        } else {
                            // console.log('没滑到可以看见曲线图的位置～')
                        }
                    }
                });
            }
        }
        if (window.level2_sum) {
            // window.levels2 = [0,0,0,0,0,0,0,0,0,0,0,3];// 测试曲线滑动数据
            window.drawCanvas.initload('curv2', window.levels2,'{$start_month}', 5, 0, 0, 2);
            var min2 = -1, whereIs3_2 = $.inArray(3, window.levels2), whereIs5_2 = $.inArray(5, window.levels2);
            // 获取曲线中，第一个点的位置
            if(min2 === -1 || (whereIs3_2 < min2 && whereIs3_2 !== -1))
            {
                min2 = whereIs3_2;
            }
            if(min2 === -1 || (whereIs5_2 < min2 && whereIs5_2 !== -1))
            {
                min2 = whereIs5_2;
            }
            if(min2 > 7)
            {
                var cruvTitle2Pos = $('.curv-tips').eq(1).offset().top, isMoved2 = false;
                // 检测是否滑动到月份曲线图
                $(window).scroll(function (e) {
                    if(isMoved2)
                    {
                        // console.log('已经触发过滑动了～')
                    } else {
                        var winPos = $(window).scrollTop();
                        if(winPos + window.screen.availHeight >= cruvTitle2Pos)
                        {
                            // console.log('曲线已经能完整看到了～')
                            $('.curv-area-content').eq(1).animate({scrollLeft: 800}, {
                                duration: 1500,
                                queue: false,// 必须设置为false，否则一直调用回调函数
                                complete: function(){
                                    // console.log('曲线滑动指定位置完成')
                                    isMoved2 = true;
                                }
                            });
                        } else {
                            // console.log('没滑到可以看见曲线图的位置～')
                        }
                    }
                });
            }
        }
        var yearListNodes = $('.year-list');
        if(yearListNodes.length > 0)
        {
            var navHeight2 = $('.nav').eq(0).height()
            var navHeight1 = window.navHeight;
            var yearListPos = yearListNodes.eq(0).offset().top;
            $(window).scroll(function (e) {
                var winPos = $(window).scrollTop();
                // var yearListPos2 = yearListNodes.eq(0).offset().top;
                // 检测年份切换条，是否需要固定在顶部展示
                if(winPos >= yearListPos - navHeight2)
                {
                    window.navHeight = navHeight1 + navHeight2;
                    yearListNodes.css({
                        'position': 'fixed',
                        'box-shadow': '0 1px 2px 0 #EEEEEE',
                        'margin-top': navHeight2 - 1,
                        'padding-bottom': '0.3rem',
                    });
                } else {
                    window.navHeight = navHeight1;
                    yearListNodes.css({
                        'position': 'relative',
                        'box-shadow': 'none',
                        'margin-top': 0,
                        'padding-bottom': 0,
                    });
                }
            });
            // 获取总宽度，获取最高的高度
            var totalWidth = 0, maxHeight = 0, yearLinkBtn = $('.year-link'), shouldScroll = 0;
            $.each(yearLinkBtn, function (k, v) {
                // 自动展示当前选中的年份
                if(k > 2 && $(v).hasClass('cur')) {
                    $('.year-list .show-area').eq(0).scrollLeft(totalWidth);
                }
                totalWidth += $(v).outerWidth() + 20;
                var nowHeight = $(v).outerHeight();
                if(nowHeight > maxHeight)
                {
                    maxHeight = nowHeight;
                }
            })
            totalWidth -= 10;// 20
            $('.list-area').eq(0).css({width: totalWidth, height: maxHeight});
        }
    })

    //友盟打点
    var SITE_ID = '1279666381'
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=' + SITE_ID + '&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</body>
</html>
